<template>
  <div class="mod-config">
    <basic-container>
      <div>
        <el-row>
          <div class="flex text-right" style="justify-content: flex-end">
            <el-button
              type="primary"
              @click="fnBackLastPage(1)"
              :disabled="showTextarea != 'ziping'"
              v-if="btnstate == 4"
              plain
              >保存</el-button
            >
            <el-button type="primary" @click="fnBackLastPage(2)" plain
              >返回</el-button
            >
          </div>
          <div
            style="
              height: 30px;
              border-bottom: 1px solid #b0bde2;
              margin-bottom: 30px;
              margin-top: -24px;
            "
          >
            基础信息
          </div>

          <el-col :xs="24" :sm="24" :md="8">
            <span>被考核人：{{ titleForm.ryName }}</span>
          </el-col>
          <el-col :xs="24" :sm="24" :md="8">
            <span>被考核人职务：{{ titleForm.userZw }}</span>
          </el-col>
          <el-col :xs="24" :sm="24" :md="8">
            <span>考核周期：{{ titleForm.start }}-{{ titleForm.end }}</span>
          </el-col>
        </el-row>
        <el-row style="margin-top: 30px">
          <div
            style="
              height: 30px;
              border-bottom: 1px solid #b0bde2;
              margin-bottom: 10px;
            "
          >
            考核任务
          </div>
          <div class="ziping-table-box">
            <!-- #eff0f4 -->
            <table
              style="width: 100%; text-align: center; border-color: #eff0f4"
              border="1"
            >
              <thead>
                <tr style="background: #b0bce2">
                  <th rowspan="2" style="width: 80px">序号</th>
                  <th rowspan="2">任务名称</th>
                  <th rowspan="2">工作目标/成效</th>
                  <th rowspan="2" style="width: 80px">权重</th>
                  <th
                    v-if="showTextarea == 'faqi' || showTextarea == 'hzziping'"
                    colspan="4"
                  >
                    完成情况评价
                  </th>
                  <th v-else colspan="4">完成情况总结</th>
                  <th rowspan="2" style="width: 120px">附件</th>
                </tr>
                <tr style="background: #b0bce2">
                  <th style="width: 170px" class="xf">
                    <el-tooltip
                      class="item"
                      effect="light"
                      content="Top Left 提示文字"
                      placement="top-start"
                      v-model="prompt1"
                      popper-class="zpmsg"
                    >
                      <div slot="content">
                        A+：提前完成<br />
                        A：按时完成<br />
                        B：调整计划后按时完成<br />
                        C：轻微延误<br />
                        D：严重延误<br />
                      </div>
                      <i class="el-icon-info"></i>
                    </el-tooltip>
                    工作效率（20%）
                  </th>
                  <th style="width: 170px">
                    <el-tooltip
                      class="item"
                      effect="light"
                      content="Top Left 提示文字"
                      placement="top-start"
                      v-model="prompt2"
                      popper-class="zpmsg"
                    >
                      <div slot="content">
                        A+:工作质量出色，各项细节处理到位，无任何差错<br />
                        A：整体准确无差错<br />
                        B：有差错，未造成影响<br />
                        C：有差错，造成轻微影响<br />
                        D：有差错，造成较大影响<br />
                      </div>
                      <i class="el-icon-info"></i>
                    </el-tooltip>
                    工作质量（20%）
                  </th>
                  <th style="width: 170px">
                    <el-tooltip
                      class="item"
                      effect="light"
                      content="Top Left 提示文字"
                      placement="top-start"
                      v-model="prompt3"
                      popper-class="zpmsg"
                    >
                      <div slot="content">
                        A+：整体满意，获得了上级组织或公司公开表扬、表彰<br />
                        A：整体满意，公司内部、外部无公开不满或投诉<br />
                        B：基本满意，有极少的公开不满或投诉<br />
                        C：有部分公开不满或投诉<br />
                        D：有较多公开不满或投诉<br />
                      </div>
                      <i class="el-icon-info"></i>
                    </el-tooltip>
                    满意度（30%）
                  </th>
                  <th style="width: 170px">
                    <el-tooltip
                      class="item"
                      effect="light"
                      content="Top Left 提示文字"
                      placement="top-start"
                      v-model="prompt4"
                      popper-class="zpmsg"
                    >
                      <div slot="content">
                        A+：超出预期<br />
                        A：达到预期<br />
                        B：基本达到预期<br />
                        C：未能达到预期<br />
                        D：严重低于预期<br />
                      </div>
                      <i class="el-icon-info"></i>
                    </el-tooltip>
                    工作效果（30%）
                  </th>
                </tr>
              </thead>
              <tbody
                v-for="(item, index) in dataForm.dataList"
                v-if="showTextarea == 'ziping' || showTextarea == 'hzziping'"
              >
                <tr style="width: 100%; text-align: center">
                  <td rowspan="2">{{ index + 1 }}</td>
                  <td rowspan="2">{{ item.renwuName }}</td>
                  <td rowspan="2">
                    <el-popover
                      placement="top-start"
                      title=""
                      width="200"
                      trigger="hover"
                      :content="item.workTarget"
                    >
                      <span slot="reference"
                        ><div
                          style="
                            width: 100px;
                            overflow: hidden;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                          "
                        >
                          {{ item.workTarget }}
                        </div></span
                      >
                    </el-popover>
                  </td>
                  <td rowspan="2">{{ item.weightset }}</td>
                  <td>
                    <div
                      class="radio-box"
                      @mouseover="prompt1 = true"
                      @mouseleave="prompt1 = false"
                    >
                      <el-radio-group
                        v-model="item.zpEfficiency"
                        style="
                          word-break: break-all;
                          padding: 10px;
                        "
                      >
                        <el-radio
                          :label="120"
                          :disabled="showTextarea == 'hzziping'"
                          >A+</el-radio
                        >
                        <el-radio
                          :label="110"
                          :disabled="showTextarea == 'hzziping'"
                          >A</el-radio
                        >
                        <el-radio
                          :label="100"
                          :disabled="showTextarea == 'hzziping'"
                          >B</el-radio
                        >
                        <el-radio
                          :label="90"
                          :disabled="showTextarea == 'hzziping'"
                          >C</el-radio
                        >
                        <el-radio
                          :label="80"
                          :disabled="showTextarea == 'hzziping'"
                          >D</el-radio
                        >
                      </el-radio-group>
                    </div>
                  </td>
                  <td>
                    <div
                      class="radio-box"
                      @mouseover="prompt2 = true"
                      @mouseleave="prompt2 = false"
                    >
                      <el-radio-group
                        v-model="item.zpQuality"
                        style="
                          word-break: break-all;
                          padding: 10px;
                        "
                      >
                        <el-radio
                          :label="120"
                          :disabled="showTextarea == 'hzziping'"
                          >A+</el-radio
                        >
                        <el-radio
                          :label="110"
                          :disabled="showTextarea == 'hzziping'"
                          >A</el-radio
                        >
                        <el-radio
                          :label="100"
                          :disabled="showTextarea == 'hzziping'"
                          >B</el-radio
                        >
                        <el-radio
                          :label="90"
                          :disabled="showTextarea == 'hzziping'"
                          >C</el-radio
                        >
                        <el-radio
                          :label="80"
                          :disabled="showTextarea == 'hzziping'"
                          >D</el-radio
                        >
                      </el-radio-group>
                    </div>
                  </td>
                  <td>
                    <div
                      class="radio-box"
                      @mouseover="prompt3 = true"
                      @mouseleave="prompt3 = false"
                    >
                      <el-radio-group
                        v-model="item.zpSatisfied"
                        style="
                          word-break: break-all;
                          padding: 10px;
                        "
                      >
                        <el-radio
                          :label="120"
                          :disabled="showTextarea == 'hzziping'"
                          >A+</el-radio
                        >
                        <el-radio
                          :label="110"
                          :disabled="showTextarea == 'hzziping'"
                          >A</el-radio
                        >
                        <el-radio
                          :label="100"
                          :disabled="showTextarea == 'hzziping'"
                          >B</el-radio
                        >
                        <el-radio
                          :label="90"
                          :disabled="showTextarea == 'hzziping'"
                          >C</el-radio
                        >
                        <el-radio
                          :label="80"
                          :disabled="showTextarea == 'hzziping'"
                          >D</el-radio
                        >
                      </el-radio-group>
                    </div>
                  </td>
                  <td>
                    <div
                      class="radio-box"
                      @mouseover="prompt4 = true"
                      @mouseleave="prompt4 = false"
                    >
                      <el-radio-group
                        v-model="item.zpEffect"
                        style="
                          word-break: break-all;
                          padding: 10px;
                        "
                      >
                        <el-radio
                          :label="120"
                          :disabled="showTextarea == 'hzziping'"
                          >A+</el-radio
                        >
                        <el-radio
                          :label="110"
                          :disabled="showTextarea == 'hzziping'"
                          >A</el-radio
                        >
                        <el-radio
                          :label="100"
                          :disabled="showTextarea == 'hzziping'"
                          >B</el-radio
                        >
                        <el-radio
                          :label="90"
                          :disabled="showTextarea == 'hzziping'"
                          >C</el-radio
                        >
                        <el-radio
                          :label="80"
                          :disabled="showTextarea == 'hzziping'"
                          >D</el-radio
                        >
                      </el-radio-group>
                    </div>
                  </td>
                  <td>
                    <div class="radio-box">
                      <el-upload
                        accept=".doc,.docx"
                        class="upload-demo"
                        action="/appr-contract/zdrwscore/upload"
                        :headers="myHeaders"
                        ref="upload"
                        :on-success="
                          (res, file) => {
                            return uploadSuccess(res, file, index);
                          }
                        "
                        :on-error="uploadError"
                        v-if="showTextarea == 'ziping'"
                      >
                        <el-button
                          size="small"
                          type="primary"
                          v-if="btnstate == 4"
                          >上传附件</el-button
                        >
                      </el-upload>
                    </div>
                  </td>
                </tr>
                <tr>
                  <td>
                    <div class="pd10">
                      <el-input
                        type="textarea"
                        :rows="2"
                        :disabled="showTextarea == 'hzziping'"
                        placeholder="请输入内容"
                        v-model="item.zpEfficiencyRemark"
                      >
                      </el-input>
                    </div>
                  </td>
                  <td>
                    <div class="pd10">
                      <el-input
                        type="textarea"
                        :rows="2"
                        :disabled="showTextarea == 'hzziping'"
                        placeholder="请输入内容"
                        v-model="item.zpQualityRemark"
                      >
                      </el-input>
                    </div>
                  </td>
                  <td>
                    <div class="pd10">
                      <el-input
                        type="textarea"
                        :rows="2"
                        :disabled="showTextarea == 'hzziping'"
                        placeholder="请输入内容"
                        v-model="item.zpSatisfiedRemark"
                      >
                      </el-input>
                    </div>
                  </td>
                  <td>
                    <div class="pd10">
                      <el-input
                        type="textarea"
                        :rows="2"
                        :disabled="showTextarea == 'hzziping'"
                        placeholder="请输入内容"
                        v-model="item.zpEffectRemark"
                      >
                      </el-input>
                    </div>
                  </td>
                  <td>
                    <div class="radio-box">
                      <el-button
                        type="text"
                        @click="downloadBtn(item.id, item.fileInfo)"
                        v-if="item.showfile"
                        >{{ item.fileInfo }}</el-button
                      >
                    </div>
                  </td>
                </tr>
              </tbody>
              <tbody
                v-if="showTextarea == 'faqi'"
                v-for="(item, index) in dataForm.dataList"
              >
                <tr>
                  <td>{{ index + 1 }}</td>
                  <td>{{ item.renwuName }}</td>
                  <td>
                    <el-popover
                      placement="top-start"
                      title=""
                      width="200"
                      trigger="hover"
                      :content="item.workTarget"
                    >
                      <span slot="reference"
                        ><div
                          style="
                            width: 100px;
                            overflow: hidden;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                          "
                        >
                          {{ item.workTarget }}
                        </div></span
                      >
                    </el-popover>
                  </td>
                  <td>{{ item.weightset }}</td>
                  <td>
                    <div
                      class="radio-box"
                      @mouseover="prompt1 = true"
                      @mouseleave="prompt1 = false"
                    >
                      <el-radio-group
                        v-model="item.zpEfficiency"
                        style="
                          display: flex;
                          justify-content: space-between;
                          padding: 0 10px;
                        "
                      >
                        <el-radio
                          :disabled="showTextarea == 'faqi'"
                          :label="120"
                          >A+</el-radio
                        >
                        <el-radio
                          :disabled="showTextarea == 'faqi'"
                          :label="110"
                          >A</el-radio
                        >
                        <el-radio
                          :disabled="showTextarea == 'faqi'"
                          :label="100"
                          >B</el-radio
                        >
                        <el-radio :disabled="showTextarea == 'faqi'" :label="90"
                          >C</el-radio
                        >
                        <el-radio :disabled="showTextarea == 'faqi'" :label="80"
                          >D</el-radio
                        >
                      </el-radio-group>
                    </div>
                  </td>
                  <td>
                    <div
                      class="radio-box"
                      @mouseover="prompt2 = true"
                      @mouseleave="prompt2 = false"
                    >
                      <el-radio-group
                        v-model="item.zpQuality"
                        style="
                          display: flex;
                          justify-content: space-between;
                          padding: 0 10px;
                        "
                      >
                        <el-radio
                          :disabled="showTextarea == 'faqi'"
                          :label="120"
                          >A+</el-radio
                        >
                        <el-radio
                          :disabled="showTextarea == 'faqi'"
                          :label="110"
                          >A</el-radio
                        >
                        <el-radio
                          :disabled="showTextarea == 'faqi'"
                          :label="100"
                          >B</el-radio
                        >
                        <el-radio :disabled="showTextarea == 'faqi'" :label="90"
                          >C</el-radio
                        >
                        <el-radio :disabled="showTextarea == 'faqi'" :label="80"
                          >D</el-radio
                        >
                      </el-radio-group>
                    </div>
                  </td>
                  <td>
                    <div
                      class="radio-box"
                      @mouseover="prompt3 = true"
                      @mouseleave="prompt3 = false"
                    >
                      <el-radio-group
                        v-model="item.zpSatisfied"
                        style="
                          display: flex;
                          justify-content: space-between;
                          padding: 0 10px;
                        "
                      >
                        <el-radio
                          :disabled="showTextarea == 'faqi'"
                          :label="120"
                          >A+</el-radio
                        >
                        <el-radio
                          :disabled="showTextarea == 'faqi'"
                          :label="110"
                          >A</el-radio
                        >
                        <el-radio
                          :disabled="showTextarea == 'faqi'"
                          :label="100"
                          >B</el-radio
                        >
                        <el-radio :disabled="showTextarea == 'faqi'" :label="90"
                          >C</el-radio
                        >
                        <el-radio :disabled="showTextarea == 'faqi'" :label="80"
                          >D</el-radio
                        >
                      </el-radio-group>
                    </div>
                  </td>
                  <td>
                    <div
                      class="radio-box"
                      @mouseover="prompt4 = true"
                      @mouseleave="prompt4 = false"
                    >
                      <el-radio-group
                        v-model="item.zpEffect"
                        style="
                          display: flex;
                          justify-content: space-between;
                          padding: 0 10px;
                        "
                      >
                        <el-radio
                          :disabled="showTextarea == 'faqi'"
                          :label="120"
                          >A+</el-radio
                        >
                        <el-radio
                          :disabled="showTextarea == 'faqi'"
                          :label="110"
                          >A</el-radio
                        >
                        <el-radio
                          :disabled="showTextarea == 'faqi'"
                          :label="100"
                          >B</el-radio
                        >
                        <el-radio :disabled="showTextarea == 'faqi'" :label="90"
                          >C</el-radio
                        >
                        <el-radio :disabled="showTextarea == 'faqi'" :label="80"
                          >D1</el-radio
                        >
                      </el-radio-group>
                    </div>
                  </td>
                  <td>-</td>
                </tr>
              </tbody>
            </table>
          </div>
        </el-row>
      </div>
    </basic-container>
  </div>
</template>

<script>
import {
  saveScore,
  downloadFile,
} from "@/api/hetongrenwu/zhongdian/renwutianbao";
import store from "@/store";
export default {
  name: "zhongdianzp-form",
  props: {
    titleForm: {},
  },
  data() {
    return {
      dataForm: {
        dataList: [],
      },
      showTextarea: "ziping",
      showTextareaTwo: "",
      myHeaders: {
        Authorization: "Bearer " + store.getters.access_token,
      },
      btnstate: 0,
      prompt1: false,
      prompt2: false,
      prompt3: false,
      prompt4: false,
    };
  },
  methods: {
    init(data) {
      console.log(data);
      this.dataForm = data.dataForm;
      this.dataForm.dataList.forEach((ele) => {
        if (
          ele.zpEfficiency == 0 ||
          ele.zpQuality == 0 ||
          ele.zpSatisfied == 0 ||
          ele.zpEffect == 0
        ) {
          ele.zpEfficiency = 120;
          ele.zpQuality = 120;
          ele.zpSatisfied = 120;
          ele.zpEffect = 120;
        }
        ele.prompt = false;
      });
      this.showTextarea = data.showTextarea;
      this.btnstate = this.dataForm.dataList[0].renwuStatus;
    },
    //返回上一个页面
    fnBackLastPage(type) {
      if (type == 1) {
        //提交后返回上一个页面
        saveScore(this.dataForm.dataList).then((res) => {
          this.$emit("fnBackLastPage", "返回原页面");
        });
      } else if (type == 2) {
        //直接返回上一个页面
        this.$emit("fnBackLastPage", "返回原页面");
      }
    },
    uploadSuccess(response, file, index) {
      this.dataForm.dataList[index].fileInfo = response.data;
      this.dataForm.dataList[index].showfile = false;
      //console.log(this.dataForm.dataList[index].fileInfo +"=====sss")
      this.$message.success("导入成功");
    },
    uploadError(err, file, fileList) {
      this.$message.error(err.msg);
      this.$refs.upload.clearFiles();
    },
    downloadBtn(id, name) {
      name = name.substr(0, name.lastIndexOf("."));
      downloadFile({ id: id }).then((response) => {
        this.$message.closeAll();
        this.$message.success("下载成功!");
        let url = window.URL.createObjectURL(new Blob([response.data]));
        let link = document.createElement("a");
        link.style.display = "none";
        link.href = url;
        link.setAttribute("download", name + ".pdf");
        document.body.appendChild(link);
        link.click();
      });
    },
  },
};
</script>

<style>
.tbody-td-top {
  padding: 10px 5px;
  height: 50px;
}
.tbody-td-bottom {
  padding: 10px 5px;
  border-top: solid 1px #808080;
}
.radio-box .el-radio {
  margin-right: 10px !important;
}
</style>
<style>
.ziping-table-box .el-radio {
  margin-right: 2px !important;
}
.ziping-table-box .el-tooltip__popper.is-light {
  padding: 10px important;
}
</style>
